<template>
<div style="padding: 10px" > 
  <my-img-wall :is-horizontal="true" :load-data="loadImgData" ref="imgWall" :columns="columns">
    <template v-slot:image="{scope}">
      <el-image style="width: 100%; height: 100%"  :src="scope._img.src" fit="cover"></el-image> 
    </template>
    <template v-slot:content="{scope}">
      <div class="content">{{scope._img.width}} x {{scope._img.height}}</div>
    </template>
  </my-img-wall>
  <div>
    <el-button @click="loadMore" type="small">更多</el-button>
  </div>
</div>
</template>
<style lang="scss" scoped>
.content{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  transition: all 0.8s;
  &:hover{
    height: 100px;
    background: rgba(250, 250, 250, 0.6);
  }
  
}
</style>

<script>
import Mock from 'mockjs'
const RandomNum = function (start = 0, end = 100) {
  return start + Math.floor(Math.random() * (end - start))
}
export default {
  data() {
    return {
      img: '',
      imgs: [],
      showImgs: [],
      columns: {
        xxl: 12,
        xl: 8,
        lg: 6,
        md: 4,
        sm: 4,
        xs: 4
      }
    }
  },
  methods: {
    getImgs() {
      const arr = []
      for (let index = 0; index < 20; index++) {
        arr.push({
          src: Mock.Random.dataImage(`${RandomNum(100, 350)}x${RandomNum(100, 350)}`, index)
        })  
      }
      return arr
    },
    loadImgData() {
      const arr = this.getImgs()
      return Promise.resolve(arr)
    },
    loadMore() {
      this.$refs.imgWall.loadMore()
    }
  },
  mounted() { 
    
  }
}
</script>


